<template>
  <el-form ref="formRef" :model="comValue" :scroll-to-error="true">
    <pub-edit-description :ndColumns="props.ndColumns">
      <pub-edit-description-item
        v-for="item in props.columns"
        :key="item.bind"
        :span="item.span"
        :label="item.label"
        :required="item.required"
      >
        <div v-if="item.type === 'text'">
          {{ item.value }}
        </div>
        <!-- input -->
        <el-form-item
          v-else-if="item.type === 'input'"
          :prop="item.bind"
          :rules="item.required ? $formRules[item.type] : [{ required: false }]"
        >
          <pub-input
            v-model="comValue[item.bind]"
            :disabled="item.disabled"
          ></pub-input>
        </el-form-item>
        <!-- textarea -->
        <el-form-item
          v-else-if="item.type === 'textarea'"
          :prop="item.bind"
          :rules="$formRules[item.type]"
        >
          <pub-textarea v-model="comValue[item.bind]"></pub-textarea>
        </el-form-item>
        <!-- input -->
        <el-form-item
          v-else-if="item.type === 'mobile'"
          :prop="item.bind"
          :rules="$formRules.phoneOrNum"
        >
          <pub-input v-model="comValue[item.bind]"></pub-input>
        </el-form-item>
        <!-- pub-select-dict -->
        <el-form-item
          v-else-if="item.type === 'pub-select-dict'"
          :prop="item.bind"
          :rules="item.required ? $formRules.select : [{ required: false }]"
        >
          <pub-select-dict
            :disabled="item.disabled"
            style="width: 100%"
            v-model="comValue[item.bind]"
            :dict-code="item.dictCode"
            placeholder="请选择"
          />
        </el-form-item>
        <!-- dictCheckbox radio -->
        <el-form-item
          v-else-if="item.type === 'dictCheckbox'"
          :prop="item.bind"
          :rules="$formRules.select"
        >
          <pub-radio-dict
            v-model="comValue[item.bind]"
            type="Number"
            :dict-code="item.dictCode"
          ></pub-radio-dict>
        </el-form-item>
         <!-- dictCheckbox checkbox -->
         <el-form-item
          v-else-if="item.type === 'dictCheckbox2'"
          :prop="item.bind"
          :rules="$formRules.select"
        >
          <pub-checkbox-dict
            v-model="comValue[item.bind]"
            type="Number"
            :dict-code="item.dictCode"
          ></pub-checkbox-dict>
        </el-form-item>
        <!-- date -->
        <el-form-item
          v-else-if="item.type === 'date'"
          :prop="item.bind"
          :rules="$formRules.select"
        >
          <el-date-picker
            style="width: 100%"
            v-model="comValue[item.bind]"
            :disabled="item.disabled"
            :type="item.dateType"
            value-format="YYYY-MM-DD"
            :disabledDate="
              item.disabledDate ? item.disabledDate : comDateDisabledDate
            "
            placeholder="请选择"
            :clearable="true"
          ></el-date-picker>
        </el-form-item>
        <!-- NumberInput -->
        <el-form-item
          v-else-if="item.type === 'inputNumber'"
          :prop="item.bind"
          :rules="item.required ? $formRules.input : [{ required: false }]"
        >
          <pub-input-number
            :disabled="item.disabled"
            v-model="comValue[item.bind]"
            :precision="item.precision"
            :min="item.min"
            :max="item.max"
          ></pub-input-number>
        </el-form-item>
        <!-- 经纬度 -->
        <el-form-item
          v-else-if="item.type === 'locationInput'"
          :prop="item.bind"
          :rules="item.required ? $formRules.select : [{ required: false }]"
        >
          <positionSelectInput
            v-model:formValue="comValue"
          ></positionSelectInput>
        </el-form-item>
        <!-- DateRangeSelect -->
        <el-form-item
          v-else-if="item.type === 'DateRange'"
          :prop="item.bindBegin"
          :rules="$formRules.select"
        >
          <date-range-select
            style="width: 100%"
            v-model:begin="comValue[item.bindBegin]"
            v-model:end="comValue[item.bindEnd]"
            :comType="item.dateType"
            :valueFormat="item.valueFormat"
            :disabled-date="item.disabledDate"
          ></date-range-select>
        </el-form-item>
        <!-- 附件 -->
        <!-- 机构选择 -->
        <!-- pub-select-dict -->
        <el-form-item
          v-else-if="item.type === 'orgSelect'"
          :prop="item.bind"
          :rules="item.required ? $formRules.select : [{ required: false }]"
        >
          <orgSelectNew
            :disabled="item.disabled"
            style="width: 100%"
            v-model="comValue[item.bind]"
            v-model:name="comValue[item.bindName]"
            placeholder="请选择"
          />
        </el-form-item>
        <div v-else-if="item.type === 'fileUpload'">
          <el-form-item
            :prop="item.bind"
            :rules="item.required ? $formRules.upload : [{ required: false }]"
          >
            <uploadNew
              @uploading="onUploading"
              v-model:fileIds="comValue[item.bind]"
              :biz-type="item.bizType"
            ></uploadNew>
          </el-form-item>
        </div>
      </pub-edit-description-item>
    </pub-edit-description>
  </el-form>
</template>
<script setup>
import { useVModel } from '@vueuse/core'
import { use } from 'echarts'
import { useAttrs } from 'vue'
import dayjs from 'dayjs'
const props = defineProps({
  formValue: {
    type: Object,
    default: () => {
      return {}
    }
  },
  columns: {
    type: Array,
    default: () => {
      return []
    }
  },
  ndColumns: {
    type: Number,
    default: 3
  }
})
const emit = defineEmits(['update:formValue', 'uploading'])
const comValue = useVModel(props, 'formValue', emit)
const formRef = ref(null)
const validateForm = () => {
  console.log(comValue)
  return new Promise((resolve, reject) => {
    formRef.value
      .validate(valid => {
        if (valid) {
          resolve(true)
        } else {
          resolve(false)
        }
      })
      .catch(e => {
        reject()
        console.log(e)
      })
  })
}
const clearValidate = async () => {
  await nextTick()
  formRef.value.clearValidate()
}
// 
const comDateDisabledDate = (date)=>{
  return dayjs().isBefore(dayjs(date))
}
const onUploading = val => {
  emit('uploading', val)
}

defineExpose({
  validateForm,
  clearValidate
})
</script>
<style lang="scss" scoped></style>
